<!--
 * @Author: sichuntian sichuntian@smartmappingtek.com
 * @Date: 2024-05-23 16:24:02
 * @LastEditTime: 2024-06-05 18:51:47
 * @Description: 
 * 
-->
<template>
  <transition name="toLeft">
    <div v-if="state.show" class="left">
      <dv-border-box-1 class="project-info left-item"></dv-border-box-1>
      <dv-border-box-9 class="project-date left-item"></dv-border-box-9>
      <dv-border-box-12 class="project-progress left-item"></dv-border-box-12>
    </div>
  </transition>
</template>

<script setup>
import { reactive } from "vue";

const state = reactive({
  show: true,
});

function isShow(boolean) {
  state.show = boolean;
}
defineExpose({
  isShow,
});
</script>

<style scoped lang="less">
.left {
  position: absolute;
  left: 0;
  top: 80px;
  width: 370px;
  height: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  background-color: rgba(52, 101, 100, 0);
  border-radius: 8px;

  .left-item {
    margin-bottom: 10px;

    img {
      width: 100%;
      padding: 5px 10px;
      box-sizing: border-box;
    }
  }

  .project-info {
    height: 300px;
    width: 100%;

    .content-box {
      color: #fff;
      height: calc(100% - 44px);
      overflow: auto;
      font-size: 12px;
      letter-spacing: 1px;
    }

    p {
      text-indent: 2em;
      padding: 0 15px;
    }
  }

  .project-date {
    height: 200px;
    width: 100%;

    .percent {
      box-sizing: border-box;
      width: 320px;
      height: 20px;
      margin: 0 15px;
    }
  }

  .project-progress {
    flex: 1;
    width: 100%;
    overflow: hidden;

    .bar {
      box-sizing: border-box;
      width: 100%;
      height: 300px;
      padding: 0 15px;
    }
  }
}

.right {
  position: absolute;
  right: 0;
  top: 80px;
  width: 370px;
  height: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
<style>
.dv-percent-pond text {
  font-size: 16px;
}
</style>
